﻿@using xConnected.Common.ExpertProfile
<div class="modal-middle hide fade" id="LanguageSkillsProfileDialog" style="display: none;" >
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div class="thumbnail"  style="margin-bottom: 10px">
            <div class="row" style="margin-left: 5px; margin-right: 5px; margin-bottom: 10px; margin-top: 10px">
                <div class="span6">
                    <label class="span6" style="margin-left: 0px"><strong>@Resources.AddLanguageSkill</strong></label>
                    <div class="row" data-bind="with: workingLanguageSkill">
                        <select style="margin-left: 30px" class="span2" id="profileAvailableLanguages" data-bind="options: $root.profile.availableLanguages, optionsText: 'Description', value: $root.profile.selectedLanguage"></select> 
                        <select style="margin-left: 20px" class="span2" data-bind="options: $root.profile.levels, optionsText: 'Description',optionsValue: 'Value', value: Level"></select>
                        <button style="margin-left: 10px; margin-bottom: 10px" class="btn btn-medium" data-bind="click: function() { $root.profile.addLanguageSkill();}"><i class="icon-plus"></i></button>  
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnail" data-bind="with: workingProfileBuffer">
            <div class="row" style="margin-left: 5px; margin-right: 5px; margin-bottom: 10px; margin-top: 10px">
                <div class="span6">
                    <label class="span6" style="margin-left: 0px"><strong>@Resources.SelectedLanguageSkills</strong></label>
                    <ul class="thumbnails" data-bind="foreach: LanguageSkills">
                        <li class="span2">
                            <div class="thumbnail" style="height: 50px">
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Language: </span><span data-bind=" text: LanguageName" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() {$root.profile.removeLanguageSkill($data)}"><i class="icon-remove"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.profile.okLanguageSkills();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.profile.cancelLanguageSkills();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>